import { safeDOM } from './utils'
 
/**
 * https://tobiasahlin.com/spinkit
 * https://connoratherton.com/loaders
 * https://projects.lukehaas.me/css-loaders
 * https://matejkustec.github.io/SpinThatShit
 */
export function useLoading() {

  const oStyle = document.createElement('style')
  const oDiv = document.createElement('div')

  oStyle.id = 'app-loading-style'
  oStyle.innerHTML =  `
  .spinner {
    text-align:center;
    width:100%;;
  }
  .spinner_img{width:100%;border-radius: 0px;}

  .app-loading-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #202020;
    z-index: 9;border-radius: 0px;
  }
      `
  oDiv.className = 'app-loading-wrap'
  oDiv.innerHTML = `<div class="spinner"><img src="./qdy.png" class="spinner_img"></div>`

  return {
    appendLoading() {
      safeDOM.append(document.head, oStyle)
      safeDOM.append(document.body, oDiv)
    },
    removeLoading() {
      safeDOM.remove(document.head, oStyle)
      safeDOM.remove(document.body, oDiv)
    },
  }
}
